<template>
  <div class="wrap-div">
    <header class="header-back">
      <i class="iconfont fl back" @click="goBack">&#xe624;</i>
      <br style="clear: both;"/>
    </header>
    <!--title-->
    <div class="welcome">
      <div class="wel-div fl">
        <h5>Hi!</h5>
        <h5>欢迎加入</h5>
      </div>
      <div class="wel-logo fr">
        <!--<img src="" alt="" />-->
        <img src="../../../static/512.png" alt="" />
      </div>
    </div>
    <!--from-->
    <div class="from">
      <div>
        <input
          class="text"
          type="number"
          placeholder="请输入手机号"
          v-model="usertel"/>
      </div>
      <div class="yanzheng-div">
        <input
          class="text yanzheng-ipt"
          type="number"
          placeholder="请输入验证码"
          v-model="verificationCode"/>
        <div v-show="isShow" class="yanzheng" @click="doCheckNum">点击获取验证码</div>
        <div v-show="!isShow" class="yanzheng">{{time}}s后重新发送</div>
      </div>
      <div class="clear">
        <span class="fr passLogin" @click="toPassLogin">使用密码登录</span>
      </div>
      <div class="nextBtn" @click="doNext">下一步</div>
    </div>
    <!--第三方-->
    <!--<div class="floatDiv" v-show="isOriginHei">
      <div class="san">第三方账号登陆</div>
      <div class="flexDiv">
        <i class="iconfont san-i">&#xe60f;</i>
        <i class="iconfont san-i">&#xe60a;</i>
      </div>
    </div>-->
  </div>
</template>

<script>
import {checkNum, checkVerificationCode, checkDistinct, queryAuthenticationInfo} from '../../api/person.js'
export default {
  data () {
    return {
      usertel: '',
      fullHeight: document.documentElement.clientHeight,
      height: document.documentElement.clientHeight,
      isOriginHei: true,
      isTrueTel: false,
      isShow: true,
      time: 0,
      verificationCode: '',
      status: ''
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    doNext () {
      if (this.usertel === '') {
        this.isTrueTel = false
        return false
      } else if (!(/^1[3456789]\d{9}$/.test(this.usertel))) {
        this.$messagebox.alert('请确认手机号是否正确?').then(() => {
          this.isTrueTel = false
        }).catch(() => {
          return false
        })
      } else {
        this.isTrueTel = true
      }
      if (this.isTrueTel) {
        this.$indicator.open({
          text: '处理中'
        })
        this.checkVerificationCode()
      }
    },
    toPassLogin () {
      this.$router.push({path: '/passLogin', query: {path: this.$route.query.redirect}})
    },
    doCheckNum () {
      if ((/^1[34578]\d{9}$/.test(this.usertel))) {
        this.isShow = false
        this.checkNum()
        this.time = 60
        let times = setInterval(() => {
          this.time--
          if (this.time <= 0) {
            this.isShow = true
            clearInterval(times)
          }
        }, 1000)
      } else {
        this.$messagebox.alert('请确认手机号是否正确?').then(() => {
          this.isShow = true
        }).catch(() => {
          return false
        })
      }
    },
    async checkNum () {
      try {
        let data = await checkNum({userPhone: this.usertel})
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    async checkVerificationCode () {
      try {
        let data = await checkVerificationCode({userPhone: this.usertel, sum: this.verificationCode})
        this.status = data.data
        this.$indicator.close()
        if (this.status === '验证成功！') {
          this.checkDistinct()
          this.queryAuthenticationInfo()
        } else {
          this.$messagebox.alert('验证码不正确')
        }
      } catch (err) {
        this.$indicator.close()
        console.log(err)
      }
    },
    async checkDistinct () {
      try {
        let data = await checkDistinct({userPhone: this.usertel})
        if (data.data.status === 200) {
          this.$store.state.isLogin = true
          localStorage.setItem('isLogin', true)
          localStorage.userNum = data.data.userNum
          this.$store.state.userNum = data.data.userNum
          this.$store.state.userPhone = this.usertel
          this.$store.state.nickName = data.data.nickName
          this.queryAuthenticationInfo()
          this.$router.push({path: '/', query: {path: this.$route.query.redirect}})
        } else {
          this.$store.state.userPhone = this.usertel
          this.$router.push({path: '/setPass', query: {path: this.$route.query.redirect}})
        }
      } catch (err) {
        console.log(err)
      }
    },
    async queryAuthenticationInfo () {
      try {
        let data = await queryAuthenticationInfo({userNum: this.user.userNum})
        if (data.data.status === 200) {
          this.$store.state.isReal = true
        } else {
          this.$store.state.isReal = false
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.go(-1)
      error
    }
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
      })()
    }
  },
  watch: {
    fullHeight (val) {
      if (this.height !== val) {
        this.isOriginHei = false
      } else {
        this.isOriginHei = true
      }
    }
  },
  created: function () {
  }
}
</script>

<style scoped>
  input{
    -webkit-touch-callout: none;
    -webkit-user-select: auto!important;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .wrap-div{
    height: 100%;
    min-height: 20rem;
  }
  .header-back{
    line-height: 2rem;
  }
  .back{
    margin-left: .5rem;
    font-size: .8rem;
  }
  .welcome{
    overflow: hidden;
    padding: 0 2rem;
    height: 3.3rem;
    justify-content: space-between;
    align-items: flex-end;
  }
  .wel-div{
    font-size: .9rem;
    font-weight: 100;
  }
  .wel-logo{
    width: 3.3rem;
  }
  .wel-logo img{
    width: 100%;
  }
  .from{
    padding: 0 2rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .clear{
    overflow: hidden;
    margin-top: .8rem;
  }
  .passLogin{
    font-size: .5rem;
  }
  .nextBtn{
    background: #e94c75;
    color: #fff;
    text-align: center;
    border-radius: .8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .7rem;
    margin-top: 1.5rem;
  }
  .passLogin{
    color: #606266;
  }
  .floatDiv{
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    padding: 0 2rem;
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
  }
  .san{
    font-size: .6rem;
    color: #606266;
  }
  .flexDiv{
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
  }
  .san-i{
    font-size: 2rem;
  }
  .text{
    height: 1.5rem;
    font-size: .7rem;
    padding: .2rem 0;
  }
  .yanzheng-ipt{
    width: 5rem;
  }
  .yanzheng-div{
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
  }
  .yanzheng{
    width: 5rem;
    text-align: center;
    padding: .2rem;
    line-height: 1.5rem;
    height: 1.5rem;
    font-size: .7rem;
    background: #e94c75;
    border-radius: .5rem;
    color: #fff;
  }
</style>
